<template>
    <el-row class="form-wrap">
        <el-col :xs="24" :sm="12" :offset="6" class="form-con">
            <h3 class="form-title">欢迎加入善云coding</h3>
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item :size="formSize" prop="college" label="学校：">
                    <el-select v-model="form.college" placeholder="请输入您所在的学校" @change="searchCollege">
                        <el-option label="长江大学" value="长江大学"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :size="formSize" prop="role" label="身份：">
                    <el-select v-model="form.role" >
                        <el-option label="学生" value="student"></el-option>
                        <el-option label="老师" value="teacher"></el-option>
                    </el-select>
                </el-form-item>
                <template v-if="form.role === 'student'">
                    <el-form-item :size="formSize" prop="classass" label="班级：">
                        <el-select v-model="form.classass"  @change="selectClass" placeholder="请选择您的班级" no-data-text="对不起，没有找到您的班级信息，请检查您的输入信息" filterable remote :remote-method="searchClass" :loading="loading">
                            <el-option  v-for="(item) in form.classList"  :key="item.id"  :label="item.name" :value="item.id" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :size="formSize" prop="stuNumber" label="学号：">
                        <el-input v-model.number="form.stuNumber" placeholder="请输入学号"></el-input>
                    </el-form-item>
                </template>
                <template v-if="form.role === 'teacher'">
                    <el-form-item :size="formSize" prop="position" label="职位：">
                        <el-select v-model="form.position" placeholder="请选择您的职位">
                            <el-option value="讲师" label="讲师"></el-option>
                            <el-option value="副教授" label="副教授"></el-option>
                            <el-option value="教授" label="教授"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :size="formSize" prop="jobNumber" label="教师号：">
                        <el-input v-model.number="form.jobNumber" placeholder="请输入您的教师号"></el-input>
                    </el-form-item>
                </template> 
                <el-form-item :size="formSize" prop="realName" label="真实姓名：">
                    <el-input v-model="form.realName" placeholder="请输入您的真实姓名"></el-input>
                </el-form-item>
                <el-form-item :size="formSize" prop="username" label="昵称：">
                    <el-input v-model="form.username" placeholder="请输入您的用户名"></el-input>
                </el-form-item>
                <el-form-item :size="formSize" prop="pwd" label="密码：">
                    <el-input type="password" v-model="form.pwd" placeholder="请输入您的密码"></el-input>                
                </el-form-item>
                <el-form-item :size="formSize" prop="phone" label="手机号：">
                    <el-input v-model.number="form.phone" placeholder="请输入您的手机号"></el-input>
                </el-form-item>
                <el-form-item :size="formSize" prop="email" label="电子邮箱：">
                    <el-input v-model="form.email" placeholder="请输入您的电子邮箱"></el-input>
                </el-form-item>
                <el-form-item class="verify" :size="formSize" prop="verify" label="验证码：">
                    <el-input  v-model.number="form.verify" placeholder="手机验证码"></el-input>
                    <el-button @click="sendSms" :disabled="sendStatus" type="button">{{ sendText }}</el-button>
                </el-form-item>
                <p class="warning">信息一经填写，将无法修改，请谨慎对待</p>
                <el-form-item>
                    <el-button :size="formSize" @click="register('form')" type="primary">注册</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<script>
import { register, sms, getCollegeInfo, getMasterInfo } from '@/utils/api'
export default {
    data () {
        return {
            loading: false,
            sendStatus: false,
            sendText: '获取验证码',
            formSize: 'mini',
            college_id: '',
            class_id: '',
            form: {
                college: '',
                classass: '',
                role: '',
                realName: '',
                phone: '',
                username: '',
                pwd: '',
                verify: '',
                email: '',
                stuNumber: null,
                position: null,
                jobNumber: null,
                classList: []
            },
            rules: {
                college: [
                    { required: true, message: '请选择您大学', trigger: 'blur'}
                ],
                classass: [
                    { required: true, message: '请输入班级', trigger: 'blur'}
                ],
                role: [
                    { required: true, message: '请选择您的身份', trigger: 'blur'}
                ],
                realName: [
                    { required: true, message: '请输入您的真实姓名', trigger: 'blur'}
                ],
                phone: [
                    { required: true, message: '请输入您的手机号', trigger: 'blur'},
                    { pattern: /^((13|14|15|17|18)[0-9]{1}\d{8})$/, message: '对不起，您输入的手机号有误', trigger: 'blur'}
                ],
                username: [
                    { required: true, message: '请输入您的昵称', trigger: 'blur'}
                ],
                pwd: [
                    { required: true, message: '请输入您的密码', trigger: 'blur'},
                    { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
                ],
                verify: [
                    { type: "integer", required: true, message: '请输入验证码', trigger: 'blur'}
                ],
                email: [
                    { required: true, message: '请输入您的邮箱', trigger: 'blur'},
                    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'}
                ],
                stuNumber: [
                    { required: true, message: '请输入您的学号', trigger: 'blur'},
                    { type: 'integer',  message: '请输入正确的学号', trigger: 'blur'}
                ],
                position: [
                    { required: true, message: '请选择您的职位', trigger: 'blur'}
                ],
                jobNumber: [
                    { required: true, message: '请输入您的教职工号', trigger: 'blur'},
                    { type: 'integer',  message: '请输入正确的教职工号', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        selectClass (id) {
            this.class_id = id;
        },
         checkField () {
            let form = {
                college_id: this.college_id,
                role: this.form.role === 'teacher' ? '2' : '1',
                real_name: this.form.realName.trim(),
                nickname: this.form.username.trim(),
                password: this.form.pwd.trim(),
                phone: this.form.phone+'',
                email: this.form.email.trim(),
                sms_code: this.form.verify+'',
                class_id: this.class_id+'',
                student_number: this.form.stuNumber+'',
                job_number: this.form.jobNumber+'',
                position: this.form.position
            }
            return form
        },
        async register (formName) {
            let form = this.checkField();
            if (form) {
                let res = await register(form)
                if (res.error === '10') {
                    this.$router.push('/login')
                } else {
                    this.$notify({
                        title: '注册失败',
                        message: res.result,
                        type: 'error'
                    })
                }
            }
        },
        async sendSms () {
            let res = await sms({ phone: this.form.phone, is_for: '1' })
            if (!this.sendStatus) {
                if (res.error === '10') {
                    this.$notify({
                        title: '发送成功',
                        message: `请查收`,
                        type: 'success'
                    })
                    this.setTime(60)
                } else {
                    this.$notify({
                        title: '发送失败',
                        message: res.result,
                        type: 'error'
                    })
                }
            }
        },
        setTime (countdown) {
            if (!countdown) {
                this.sendText = '获取验证码'
                this.sendStatus = false
            } else {
                this.sendText = '重新发送(' + countdown + ')'
                this.sendStatus = true
                countdown--
                setTimeout(() => { this.setTime(countdown) }, 1000)
            }
        },
        async searchCollege (query) {
            let res = await getCollegeInfo({key:this.form.college});
            this.college_id = res.result[0].id;
        },
        async searchClass(query) {
            if(query !== ""){
                this.form.classass = '';
                this.loading = true;
                let res = await getCollegeInfo({key:this.form.college});
                this.college_id = res.result[0].id;
                if(res.error === "10"){
                    let classInfo = await getMasterInfo({key: query, college_id: this.college_id})
                    console.log(classInfo)
                    this.form.classList = classInfo.result;
                    this.loading = false;
                }
            }
        }
    }
}
</script>

<style lang="stylus">
    .form-wrap{
        padding 0 20px;
        .form-title{
            border-bottom 2px solid #eee;
            padding 10px 0;
            margin-bottom 10px;
        }
        .verify .el-form-item__content{
            display flex;
            align-items: center;
            justify-content: space-between;
        }
        .warning{
            color red;
            padding-left 20px;
            font-size 12px;
        }
    }
</style>
